<template>
  <div id="register">
    <el-divider content-position="left"
      ><i class="el-icon-document light-blue-clor" style="font-size: 30px"></i
      >&nbsp;<font style="font-size: 15px" class="light-blue-clor"
        >(●ˇ∀ˇ●)</font
      ></el-divider
    >

    <el-form
      v-loading="loading"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :label-position="labelPosition"
      label-width="70px"
    >
      <el-form-item label="账号" prop="account">
        <el-input
          v-model="ruleForm.account"
          placeholder="请输入账号"
          autocomplete="off"
          prefix-icon="el-icon-user"
        ></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input
          v-model="ruleForm.nickname"
          placeholder="请输入昵称"
          autocomplete="off"
          prefix-icon="el-icon-magic-stick"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          type="password"
          placeholder="请输入密码"
          prefix-icon="el-icon-key"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPassword">
        <el-input
          v-model="ruleForm.checkPassword"
          type="password"
          placeholder="请确认密码"
          prefix-icon="el-icon-unlock"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="mail">
        <el-input
          v-model="ruleForm.mail"
          placeholder="请输入邮箱(用于重置密码)"
          prefix-icon="el-icon-message"
        ></el-input>
      </el-form-item>
      <el-form-item label="邀请码" prop="invitationCode">
        <el-input
          v-model="ruleForm.invitationCode"
          placeholder="请输入邀请码(未开放注册时需要填写)"
          prefix-icon="el-icon-share"
        ></el-input>
      </el-form-item>

      <el-form-item style="text-align: right">
        <el-button plain size="mini" round @click="back"
          ><i class="el-icon-arrow-left"></i>返回</el-button
        >

        <el-popconfirm title="将会重置所有的项目, 是否继续?" @confirm="reset">
          <el-button size="mini" round slot="reference">重置</el-button>
        </el-popconfirm>

        <el-button type="primary" size="mini" round @click="register" :disabled="disableBtn"
          >注册<i class="el-icon-arrow-right"></i
        ></el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { URLS } from "@/router";
import axios from "@/util/AxiosUtil";
import apis from "@/util/ApiUrls";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPassword !== "") {
          this.$refs.ruleForm.validateField("checkPassword");
        }
        callback();
      }
    };

    var validatecheckPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认密码"));
      } else {
        if (this.ruleForm.checkPassword !== this.ruleForm.password) {
          callback(new Error("密码输入不一致"));
        } else {
          callback();
        }
      }
    };

    var validateMail = (rule, value, callback) => {
      if (this.ruleForm.mail === "") {
        callback(new Error("请输入邮箱"));
      } else {
        let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if (!reg.test(this.ruleForm.mail)) {
          callback(new Error("邮箱不合法"));
        } else {
          callback();
        }
      }
    };

    var validateAccount = (rule, value, callback) => {
      if (this.ruleForm.account === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };

    var validateNickName = (rule, value, callback) => {
      if (this.ruleForm.nickname === "") {
        callback(new Error("请输入昵称"));
      } else {
        callback();
      }
    };

    return {
      disableBtn: false, // 注册按钮禁用/非禁用
      loading: false,
      labelPosition: "left",
      ruleForm: {
        account: "",
        nickname: "",
        password: "",
        checkPassword: "",
        mail: "",
        invitationCode: "",
      },
      rules: {
        account: [{ validator: validateAccount, trigger: "change" }],
        nickname: [{ validator: validateNickName, trigger: "change" }],
        password: [{ validator: validatePass, trigger: "change" }],
        checkPassword: [{ validator: validatecheckPass, trigger: "change" }],
        mail: [{ validator: validateMail, trigger: "change" }],
      },
    };
  },
  methods: {
    reset() {
      this.$notify.info({
        title: "消息",
        message: "已重置",
        duration: 800,
      });
      this.$refs["ruleForm"].resetFields();
    },
    // 返回
    back() {
      this.$router.push({
        name: URLS.loginName,
      });
    },
    // 注册
    register() {
      const _this = () => this;
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          // 禁用按钮
          this.disableBtn = true;
          axios
            .post(apis.api_auth.register, {
              account: this.ruleForm.account,
              password: this.ruleForm.password,
              nickname: this.ruleForm.nickname,
              mail: this.ruleForm.mail,
              invitationCode: this.ruleForm.invitationCode,
            })
            .then(() => {
              this.$notify({
                title: "( •̀ .̫ •́ )✧",
                message: "注册申请已记录,等待管理员确认,即将回到登录界面",
                type: "success",
                duration: 1200,
                onClose: () => {
                  _this().$router.push({
                    name: URLS.loginName,
                  });
                },
              });
            })
            .catch((e) => {
              this.$message({
                message: "注册失败:" + e.msg,
                type: "error",
                duration: 2000,
              });
              // 异常则恢复
              this.disableBtn = false;
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#register {
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  width: 350px;
  height: 450px;
  border: 1px solid #7ebbf7e5;
  box-shadow: 0 2px 12px 0 #7ebbf7e5;
  border-radius: 10px;
  padding: 15px;
  background-color: #ffffff;
}
</style>
